<template>

    <div class="city-box">
        <van-nav-bar left-arrow @click-left="onClickLeft" />
        <h4>热门城市</h4>
        <van-grid :gutter="10" v-if="hots.list.length != 0">
            <van-grid-item v-for="value in hots.list" :key="value"  :text="value.city" @click="jumpTo(value.city)" />
        </van-grid>
        <h4>城市列表</h4>
        <van-index-bar :index-list="indexList">
            <div v-for="(row, i) in data.list" v-bind:key="i">
                <van-index-anchor :index="row.firstcode" />
                <router-link v-for="(col, j) in row.data" v-bind:key="j" :to="{ path: '/home', query: { city: col.city } }">
                    <van-cell :title="col.city" />
                </router-link>
            </div>
        </van-index-bar>
    </div>
</template>
<script lang="ts" setup>
// 导入相关的接口
import { getCityList, getCodeList, getHotCityList } from '../api/index'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
const $router = useRouter()
// 返回上一级
const onClickLeft = () => {
    $router.back();
}
// 跳转页面的方法
const jumpTo = (city: string)=> {
    $router.push({
        path: '/home',
        query: {
            city
        }
    })
}

// 定义变量
let indexList = ref([]);
let data: any = reactive({ list: [] })
let hots: any = reactive({ list: []})


// 编写初始化方法
const initFn = async () => {
    // 获取热门城市
    await getHotCityList()
    .then(
        (content)=>{
            // console.log('0.0',content)
            if(content.code == 200){
                hots.list = content.result;
            }
        }
    )
    // 获取城市
    await getCityList()
        .then(
            content => {
                // console.log('1.0', content)
                if (content.code == 200) {
                    let citys = content.result;
                    // console.log(citys)
                    return citys;
                }
            }
        )
        .then(
            async (citys) => {
                await getCodeList()
                    .then(
                        res => {
                            // console.log('2.0', res);
                            if (res.code == 200) {
                                let codes = res.result;
                                // 记录首字母
                                indexList.value = codes;
                                let arr = [];
                                for (let i = 0; i < codes.length; i++) {
                                    let obj: any = {
                                        firstcode: codes[i],//记录着首字母
                                        data: []
                                    };
                                    for (let j = 0; j < citys.length; j++) {
                                        if (citys[j].firstcode == codes[i]) {
                                            obj.data.push(citys[j]);//记录着首字母下所有城市
                                        }
                                    }
                                    arr.push(obj)
                                }
                                // 循环结束 数据整合完成
                                data.list = arr
                                // console.log('3.0', data.list)
                            }
                        }
                    )
            }
        )


}
initFn()

</script>

<style lang="less">
.city-box {
    width: 100%;

    h4 {
        padding: .2667rem .4rem 0 .2667rem;
        box-sizing: border-box;
        margin-bottom: .2667rem;
    }
}

/* html元素 */
:root {
    --van-index-bar-index-line-height: 170%;
    --van-nav-bar-icon-color: #000;
}
</style>